var accordion;
var signUpFormMask;

// turn on validation errors beside the field globally
function initPage() {
    Ext.form.Field.prototype.msgTarget = 'side';

    // Login form
    var loginPasswordTextField = new Ext.form.TextField({
        anchor: '95%',
        fieldLabel: 'Password',
        id: 'loginPasswordTextField',
        name: 'password',
        inputType: 'password',
        allowBlank: false
    });

    var loginEmailTextField = new Ext.form.TextField({
        anchor: '95%',
        fieldLabel: 'Email',
        id: 'loginEmailTextField',
        name: 'email',
        allowBlank: false,
        vtype: 'email'
    });
    
    var loginPasswordEmailFieldSet = new Ext.form.FieldSet({
        id: 'loginPasswordEmailFieldSet',
        labelWidth: 100,
        items: [
            loginEmailTextField,
            loginPasswordTextField
        ]
    })

    var signInFormForgotDisplayField = new Ext.form.DisplayField({
        id: 'signInFormForgotDisplayField',
        value: 'Forgot Password?',
        autoCreate: {tag: "a", onclick: 'showForgetForm()'}
    })

    var signInFormDisplayFieldSetSpacer = new Ext.Spacer({
        id: 'signInFormDisplayFieldSetSpacer',
        height: 10
    })

    var signInFormSignUpDisplayField = new Ext.form.DisplayField({
        id: 'signInFormSignUpDisplayField',
        value: 'Sign up?',
        autoCreate: {tag: "a", onclick: 'showSignUpForm()'}
    })

    var loginFormSubmitButton = new Ext.Button({
        text: 'Submit',
        menuAlign: 'br',
        handler: function() {
            signUpFormMask = new Ext.LoadMask('loginFormBody', {msg:"Please wait..."})
            signUpFormMask.show();
            loginForm.getForm().submit();
        }
    });

    var loginForm = new Ext.FormPanel({
        url: 'service/users/login/',
        frame:true,
        title: 'Login',
        id: 'loginForm',
        bodyStyle:'padding:5px 5px 0',
        anchor: '100%',
        bwrapCfg: {
            id: 'loginFormBody'
        },
        labelWidth: 30,
        defaultType: 'textfield',
        items: [
            loginPasswordEmailFieldSet,
            signInFormForgotDisplayField,
            signInFormDisplayFieldSetSpacer,
            signInFormSignUpDisplayField

        ],
        buttonAlign: 'right',
        listeners: {
            actioncomplete: function() {
                signUpFormMask.hide()
            },
            actionfailed: function() {
                alert('Failed')
                signUpFormMask.hide()
            }
        },
        buttons: [
        loginFormSubmitButton
        ]
    });
    loginForm.getForm().on('beforeaction', validateLoginForm)


    // forgot Form
    var forgotEmailTextField = new Ext.form.TextField({
        anchor: '95%',
        fieldLabel: 'Email',
        id: 'forgotEmailTextField',
        name: 'email',
        allowBlank: true,
        vtype: 'email',
        maxLength: 40
    });

    var forgotFormSubmitButton = new Ext.Button({
        text: 'Submit',
        handler: function() {
            signUpFormMask = new Ext.LoadMask('forgotFormBody', {msg:"Please wait..."})
            signUpFormMask.show();
            forgotForm.getForm().submit();
        }
    });

    var forgotForm = new Ext.FormPanel({
        url: 'service/users/reset/password/',
        id: 'forgotForm',
        frame:true,
        bwrapCfg: {
            id: 'forgotFormBody'
        },
        title: 'Forget username or password?',
        bodyStyle:'padding:5px 5px 0',
        anchor: '100%',
        defaultType: 'textfield',
        items: [
        forgotEmailTextField
        ],
        buttons: [
        forgotFormSubmitButton
        ],
        listeners: {
            actioncomplete: function() {
                signUpFormMask.hide()
            },
            actionfailed: function() {
                alert('Failed')
                signUpFormMask.hide()
            }
        },
        buttonAlign: 'right'
    });
    forgotForm.getForm().on('beforeaction', validateForgotForm)



    // Sign Up Form
    var signUpEmailTextField = new Ext.form.TextField({
        anchor: '95%',
        fieldLabel: 'Email',
        id: 'signUpEmailTextField',
        name: 'signUpEmail',
        allowBlank: false,
        vtype: 'email',
        maxLength: 40
    });

    var reEmailTextField = new Ext.form.TextField({
        anchor: '95%',
        fieldLabel: 'Re-enter Email',
        id: 'reEmailTextField',
        name: 'reEmail',
        allowBlank: false,
        vtype: 'email'
    });


    var signUpPasswordTextField = new Ext.form.TextField({
        anchor: '95%',
        fieldLabel: 'Password',
        id: 'signUpPasswordTextField',
        name: 'signUpPassword',
        allowBlank: false,
        inputType: 'password',
        minLength: 8,
        maxLength: 20,
        minLengthText: 'Passwords must be between 8 and 20 characters long',
        maxLengthText: 'Passwords must be between 8 and 20 characters long'
    });

    var rePasswordTextField = new Ext.form.TextField({
        anchor: '95%',
        fieldLabel: 'Re-enter Password',
        id: 'rePasswordTextField',
        name: 'rePassword',
        allowBlank: false,
        inputType: 'password'
    });

    var signUpAgreementTextField = new Ext.form.TextArea({
        anchor: '95%',
        hideLabel: true,
        id: 'signUpAgreementTextField',
        value: 'I agree not to abuse this site blah blah blah a whole lot of frontin.',
        readOnly: true,
        listeners: {
            focus: function() {
                signUpAgreementCheckBox.enable()
            }
        }
    })

    var signUpAgreementCheckBox = new Ext.form.Checkbox({
        fieldLabel: 'I have read and agree to the terms',
        id: 'signUpAgreementCheckBox',
        disabled: true,
        name: 'readAgreement'

    })

    var agreementFieldSet = new Ext.form.FieldSet({
        anchor: '95%',
        labelWidth: 200,
        items: [
            signUpAgreementTextField,
            signUpAgreementCheckBox
        ]
    })

    var emailPasswordFieldSet = new Ext.form.FieldSet({
        anchor: '95%',
        items: [
            signUpEmailTextField,
            reEmailTextField,
            signUpPasswordTextField,
            rePasswordTextField
        ]
    })

    var signUpFormSubmitButton = new Ext.Button({
        text: 'Submit',
        handler: function() {
            signUpFormMask = new Ext.LoadMask('signUpFormBody', {msg:"Please wait..."})
            signUpFormMask.show();
            signUpForm.getForm().submit();
        }
    })

    var signUpForm = new Ext.FormPanel({
        frame: true,
        url: 'service/users/add/',
        title: 'Sign up',
        id: 'signUpForm',
        bwrapCfg: {
            id: 'signUpFormBody'
        },
        bodyStyle: 'padding:5px 5px 0',
        labelWidth: 120,
        waitMsgTarget: true,
        autoScroll: true,
        items: [
            emailPasswordFieldSet,
        agreementFieldSet
        ],
        buttons: [
            signUpFormSubmitButton
        ],
        listeners: {
            actioncomplete: function() {
                signUpFormMask.hide()
            },
            actionfailed: function() {
                alert('Failed')
                signUpFormMask.hide()
            }
        },
        buttonAlign: 'right'
    })
    signUpForm.getForm().on('beforeaction', validateSignUpForm)

    var spaceBetweenToolbarLogin = new Ext.Spacer({
        anchor: '100%, 20%'
    })
    pageAnchor.add(spaceBetweenToolbarLogin);

    accordion = new Ext.Panel({
        layout:'accordion',
        anchor: '30%',
        height: 300,
        layoutConfig: {

            titleCollapse: true,
            animate: true,
            autoWidth: true,
            hideCollapseTool: true
        },
        items: [loginForm, forgotForm, signUpForm]
    });
    
    pageAnchor.add(accordion);
}

function showForgetForm() {
    accordion.getLayout().setActiveItem('forgotForm');
}

function showSignUpForm() {
    accordion.getLayout().setActiveItem('signUpForm');
}